<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>myVue</title>
    <!-- 导入vue包 -->
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        {{a}}
    </div>

    <script type="text/javascript">
    var data = {a:1};
    // 我们导入vue包后  浏览器的内存中就多了一个vue构造函数  vm调度者
    var vm = new Vue ({
        beforeCreate:function() {
            console.log("beforeCreate");
        },

        el: '#app',  //我们new的vue实例 要控制的页面区域
        data: data,  //存放el中要用到的数据 不提倡使用dom操作元素  就是mvvm中的m

        created:function() {
            console.log("created");
        },

        beforeMount:function() {
            console.log("beforeMount");
        },

        mounted:function(){
            console.log("mounted");
        },

        beforeUpdate:function(){
            console.log("beforeUpdate");
        },

        updated:function(){
            console.log("updated");
        },
    });
    //data.a = 2;
    vm.$watch('a', function(newVal, oldVal){
        console.log(newVal, oldVal);
    })
    vm.a = 'ttt';

    setTimeout(function(){
        vm.a='change......';
    },3000)
    </script>
</body>
</html>